<template>
  <div class="row">
    <h1 v-show="state.isInit">请开始搜索！！！</h1>
    <h1 v-show="state.isSearch">搜索中......</h1>
    <Item v-for="user in state.userList" :key="user.id" v-bind="user" />
  </div>
</template>

<script>
import Item from "@/components/List/Item";

import PubSub from "pubsub-js";

export default {
  name: "List",
  components: {
    Item,
  },
  data() {
    /* 状态提升初始化状态 */
    return {
      state: {
        isInit: true,
        isSearch: false,
        userList: [],
      },
    };
  },
  methods: {
    setState({ isInit, isSearch, userList }) {
      if (isInit !== undefined) this.state.isInit = isInit;
      if (isSearch !== undefined) this.state.isSearch = isSearch;
      if (userList !== undefined) this.state.userList = userList;
    },
  },
  mounted() {
    // 给 Vue 实例，添加事件
    this.$bus.$on("setState", this.setState);
  },
  beforeDestroy() {
    // 解绑 Vue 实例中的事件
    this.$bus.$off(["setState"]);
  },
};
</script>

<style>
</style>